<template>
    <div>
        <form action="/">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"/>
        </form>
        <div class="history">
            <van-cell title="搜索历史">
                <div @click="delet">
                    <span>全部删除</span>&nbsp;&nbsp;<van-icon name="delete-o" />
                </div>
            </van-cell>
            <div v-for="(item,index) in search" :key="index">
                <van-cell :title="item">
                    <van-icon name="close" @click="deleone(index)"/>
                </van-cell>
            </div>
        </div>
        <van-divider/>
        <div class="Inquire">
            <ul>
                <li v-for="(item,index) in actcat" :key="index" @click="quect(index)">
                    <div class="wz">
                        <span>{{ item.title }}</span>
                    </div>
                    <div class="img">
                        <img v-for="(item,index) in item.imageSrc" :key="index" :src="item" alt="">
                    </div>
                    <div class="aricle_bottom">
                        <span class="left">昵称:{{ item.author }}</span>   
                        <span class="cont">评论:{{ item.comment }}</span> 
                        <span class="right">时间:{{ item.time | dateFormate }}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      value: '',
      search:[],
      actcat:[]
    };
  },
  created(){
      if(localStorage.getItem('serch') == []){
            this.search = JSON.parse(localStorage.getItem('serch'))
      } else if(localStorage.getItem('serch') != []) {
            this.search = JSON.parse(localStorage.getItem('serch'))
      }
  },
  methods: {
    quect(index){
        let id = this.actcat[index]._id
        this.$router.push({
            name:'article',
            query:{
                id:id
            }
        })
    },
    onSearch() {
        if(this.value){
            this.search.push(this.value)
            localStorage.setItem('serch',JSON.stringify(this.search))
            this.search = JSON.parse(localStorage.getItem('serch'))
            this.$http.post('/api/search',{
                key_word:this.value,
                skip:0,
                limit:20
            })
            .then((res)=>{
                console.log(res)
                this.actcat = res.data
                this.value = ''
            })
            
        } else {
            Toast('请输入关键字')
        }
    },
    onCancel() {
      this.$router.push('/anniu1')
    },
    delet(){
        localStorage.removeItem('serch')
        this.search = []
    },
    deleone(index){
        this.search.splice(index,1)
    }
  },
};
</script>
<style>
.van-cell__title{
    display: flex;
}
.van-field__left-icon .van-icon, .van-field__right-icon .van-icon {
    font-size: 14px;
}
.history{
    height: 220px;
    overflow: hidden;
}
.Inquire{
    width: 100%;
    z-index: 1;
}
.Inquire li{
    border: 1px solid #ccc;
    height: 150px;
}
.Inquire .img{
    height: 100px;
    width: 100%;
}
.Inquire .img img{
    width:100px;
    height: 100px;
    float: right;
}
</style>